<template>
  <div class="about">
    <Myhead></Myhead>
    <div class="con">
      <img
        src="http://img.sirfang.com/effect_img/2020/10/19/7069485c44ab053c95bc3dd861634ddb.jpg"
        alt=""
      />
      <div class="effect-intro-house">
        <span class="line"></span>
        <ul id="j-effect-nav" class="flex clearfix">
          <li class="active" data-sum="0">
            <span class="cercle"><i></i></span>
            <p>
              <span>客厅</span>
              <span>(3)</span>
            </p>
          </li>
          <li class="" data-sum="3">
            <span class="cercle"><i></i></span>
            <p>
              <span>卧室</span>
              <span>(0)</span>
            </p>
          </li>
          <li class="" data-sum="3">
            <span class="cercle"><i></i></span>
            <p>
              <span>书房</span>
              <span>(0)</span>
            </p>
          </li>
          <li class="" data-sum="3">
            <span class="cercle"><i></i></span>
            <p>
              <span>厨房</span>
              <span>(0)</span>
            </p>
          </li>
          <li class="" data-sum="3">
            <span class="cercle"><i></i></span>
            <p>
              <span>卫生间</span>
              <span>(0)</span>
            </p>
          </li>
          <li class="" data-sum="3">
            <span class="cercle"><i></i></span>
            <p>
              <span>餐厅</span>
              <span>(2)</span>
            </p>
          </li>
          <li class="" data-sum="5">
            <span class="cercle"><i></i></span>
            <p>
              <span>阳台</span>
              <span>(0)</span>
            </p>
          </li>

          <li class="" data-sum="5">
            <span class="cercle"><i></i></span>
            <p>
              <span>其他</span>
              <span>(0)</span>
            </p>
          </li>
        </ul>
      </div>
      <p class="img-extra f-fr">
        <strong>设计诠释：</strong>恒逸金榈湾85平中式古典三居室
      </p>
    </div>
    <Myfoot></Myfoot>
  </div>
</template>
<script>
import Myhead from "@/components/Myhead";
import Myfoot from "@/components/Myfoot";
export default {
  components: {
    Myhead,
    Myfoot,
  },
  data() {
    return {};
  },
};
</script>
<style lang="scss" scoped>
.about {
  height: 100%;
}
.con {
  width: 100%;
  overflow: auto;
  background-color: #202020;
  padding: 30px 0 20px;
  img {
    width: 100%;
    height: auto;
  }
  .effect-intro-house {
    height: 90px;
    width: 100%;
    background-color: #000;
    position: relative;
  }
  .effect-intro-house .line {
    width: 100%;
    height: 2px;
    position: absolute;
    top: 20%;
    background: #2bb281;
    border-top: 1px solid #2bb281;
    color: #2bb281;
  }
  .flex {
    width: 100%;
    display: flex;
  }
  .effect-intro-house ul li {
    height: 90px;
    cursor: pointer;
    text-align: center;
    float: left;
    font-size: 14px;
    color: #fff;
    position: relative;
  }
  .flex a,
  .flex li {
    width: 100%;
    display: inline-block;
    flex: 1;
    text-align: center;
  }
  .effect-intro-house ul li span {
    width: 100%;
    display: inline-block;
    line-height: 1.5;
  }
  .effect-intro-house ul li .cercle i {
    width: 16px;
    height: 16px;
    border: 1px solid #2bb281;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #000;
    border-radius: 50%;
  }

  span,
  label,
  i,
  input {
    vertical-align: middle;
  }
  .effect-intro-house ul li p {
    position: absolute;
    top: 36px;
  }
  .effect-intro-house ul li span {
    width: 100%;
    display: inline-block;
    line-height: 1.5;
  }
  .effect-detail .img-extra {
    padding: 0 0.3rem 0.3rem 0.3rem;
    font-size: 16px;
    line-height: 1.6;
  }
}
</style>
